﻿<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7]><html class="ie ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8]><html class="ie ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9]><html class="ie ie9" lang="zh-cn"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="zh-cn"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../css/rule.css">
</head>
<body>

<h2 class="rule_hd">编码规范</h2>
<div class="rule_cont">
    <!--S MD content -->
    <h3 id="书写规则">书写规则</h3>
    <ol style="list-style-type: decimal">
        <li>选择符(selector)换行书写；属性(properties)和属性的取值(value)横排书写，不换行。</li>
        <li>背景图URL引用时 属性值统一不加引号。</li>
        <li>margin，padding，border等属性可以简写的尽量简写，后续修改维护时，只需要改动单边属性值即可。</li>
        <li>CSS HACK使用标准形式放置于紧跟相同属性后面，并加以注释。</li>
    </ol>
    <h3 id="书写顺序">书写顺序</h3>
    <ol style="list-style-type: decimal">
        <li>组合实现的功能放一起 如：截断<code>width:100%; overflow:hidden;white-space:nowrap;text-overflow:ellipsis</code> (大部分人都用自己的代码片段实现了，Nice)</li>
        <li>长内容的放最后 如：图片：<code>background:-ms-linear-gradient(top,#2372cf 0,#3064af 100%);</code></li>
        <li><p>多个选择符：如果是选择符组，则这些选择符(selector)各占一行</p></li>
        <li><p>推荐书写顺序：布局类 &gt; 盒模型 &gt; 表现类 (可选，不强制要求)</p></li>
    </ol>
    <ul>
        <li>布局：
        <ul>
            <li>display</li>
            <li>float</li>
            <li>position</li>
            <li>top</li>
            <li>right</li>
            <li>bottom</li>
            <li>left</li>
            <li>z-index</li>
            <li>clear</li>
            <li>visibility</li>
            <li>table-layout</li>
        </ul></li>
        <li>盒模型
        <ul>
            <li>width</li>
            <li>max-width</li>
            <li>min-width</li>
            <li>height</li>
            <li>max-height</li>
            <li>min-height</li>
            <li>line-height</li>
            <li>overflow</li>
            <li>margin</li>
            <li>padding</li>
            <li>border</li>
        </ul></li>
        <li>表现
        <ul>
            <li>color</li>
            <li>font- 家族</li>
            <li>text- 家族</li>
            <li>vertical-align</li>
            <li>letter-spacing</li>
            <li>white-space</li>
            <li>word-spacing</li>
            <li>content</li>
            <li>list-style</li>
            <li>filter</li>
            <li>background</li>
        </ul></li>
    </ul>
    <!--E MD content -->
</div>

</body>
</html>
